// 导入 react 依赖包
import React from 'react';
import ReactDOM from 'react-dom/client';

// 1 创建挂载点
const root = ReactDOM.createRoot(document.getElementById('root'));

// 创建 p 标签
const p = React.createElement('p', null, '月薪过万');
// 给p添加一个id = 123 的属性
const p2 = React.createElement('p', { id: 123 }, '月薪过万');
// 添加样式了
const p3 = React.createElement(
  'p',
  { id: 123, className: 'title' },
  '月薪过万'
);

// 创建一个 div 标签，包含一个 p 标签
// <div>
//   hello
//   <p></p>
//   <p></p>
// </div>
const div = React.createElement('div', null, 'Hello', p3, p);

// 5 创建 如下结构。
{
  /* <div>
    <h2>购物列表</h2>
    <ul>
        <li>华为</li>
        <li>iPhone</li>
    </ul>
</div> */
}

const el = React.createElement(
  'div',
  null,
  React.createElement('h2', null, '购物列表'),
  React.createElement(
    'ul',
    null,
    React.createElement('li', null, '华为'),
    React.createElement('li', null, 'iPhone')
  )
);

// 探索：创建一个非html规范的标签
const test = React.createElement('hello', null, 'hello,hello');

// 3 渲染 React 元素
const container = React.createElement('div', null, p, p2, p3);

// 创建元素
const h1El = React.createElement('h1', { id: 'h1-001' }, 'Hello React');
// 这个 h1El 是啥？
console.log('el', typeof h1El);
console.log(h1El);
console.log(h1El.type);
console.log(container);

root.render(container);
